
<template>
  <!-- 我的议价 -->
  <div class="my-order">
    <div class="my-order-header">
      <!-- <el-radio-group v-model="ruleForm.status" size="small" @change="ruleForm.page = 1, handleQuery()">
        <el-radio-button label="101">议价待确认</el-radio-button>
        <el-radio-button label="100">议价完成</el-radio-button>
        <el-radio-button label="102">待生成订单</el-radio-button>
        <el-radio-button label="301">已生成订单</el-radio-button>
        <el-radio-button label="103">无法议价</el-radio-button>
      </el-radio-group> -->
      <el-tabs v-model="ruleForm.status" @tab-click="ruleForm.page = 1, handleQuery(),reset() ">
        <el-tab-pane label="议价待确认" name="101"></el-tab-pane>
        <el-tab-pane label="待生成订单" name="102"></el-tab-pane>
        <el-tab-pane label="已生成订单" name="301"></el-tab-pane>
        <el-tab-pane label="无法议价" name="103"></el-tab-pane>
      </el-tabs>
        <div class="search">
          <div class="my-order-form">
            <el-form class="search-form" ref="form" :model="ruleForm" label-width="76px">
              <el-form-item label="型号" prop="partnumber" class="label-name">
                <el-input v-model="ruleForm.partnumber" @keyup.enter.native="handleQuery" clearable size="small"
                  placeholder="请输入型号"></el-input>
              </el-form-item>
              <el-form-item label="品牌" prop="brand" class="label-name">
                <el-input v-model="ruleForm.brand" @keyup.enter.native="handleQuery" clearable size="small"
                  placeholder="请输入品牌"></el-input>
              </el-form-item>
              <el-form-item label="报价时间" prop="date" class="dataItem">
                <!-- <el-date-picker v-model="ruleForm.date"
                            @change="handleQuery"
                            style="width: 250px;"
                            size="small"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd"
                            :picker-options="pickerOptions">
                </el-date-picker> -->
                <mydate @getSelectData="getCreateDate" :createDate="ruleForm.date"></mydate>
              </el-form-item>


              <!-- <el-form-item label="报价单号:"
                        placeholder="请输入报价单号"
                        prop="id">
            <el-input v-model="ruleForm.id"
                      @keyup.enter.native="handleQuery"
                      clearable
                      size="small"></el-input>
              </el-form-item> -->



            </el-form>
          </div>
          <div class="search-btn">
          <div class="elbtn">
            <el-button type="primary" size="small" @click="handleQuery">查询</el-button>
            <el-button class="resletBtn" size="small" @click="handleReset">重置</el-button>
          </div>
        </div>
        </div>
       


    </div>
    <div class="my-order-footer">
      <el-table :data="tableData" v-loading='loading' v-adaptive='{ bottomOffset: 80 }' height="300px" width="100%"
        border>
        <!-- <el-table-column :index="(index)=> (ruleForm.page-1)*ruleForm.pageSize+index+1"
                         type="index"
                         width="50">
            </el-table-column> -->
        <el-table-column label="操作" key="work" v-if="ruleForm.status == '101'" align="center" width="80px">
          <template slot-scope="{row}">
            <el-button type="text" class="btn" @click="handleBargin(row)">议价</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="negotiateRemainMin" label="剩余议价时间" key="negotiateRemainMin" v-if="ruleForm.status == '101'"
          show-overflow-tooltip>
          <template v-slot="{ row }">

            <p style="color:#E02020"> {{ (0 >= row.negotiateRemainMin * 1 ? "已结束" : row.negotiateRemainMin) | manageTime
            }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="product_partnumber" label="型号" key="product_partnumber" show-overflow-tooltip width="320px">
          <template v-slot="{ row }">
            <p v-if="row.product_partnumber == '' || row.product_partnumber == null || row.product_partnumber == 0">-</p>
            <span v-else>{{ row.product_partnumber }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="product_brand" label="品牌" key="product_brand" show-overflow-tooltip width="270px">
          <template v-slot="{ row }">
            <p v-if="row.product_brand == '' || row.product_brand == null || row.product_brand == 0">-</p>
            <span v-else>{{ row.product_brand }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label="数量" key="quantity">
          <template v-slot="{ row }">
            <p v-if="row.quantity == '' || row.quantity == null || row.quantity == 0">-</p>
            <span v-else>{{ row.quantity }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="product_dateCode" label="批次" key="product_dateCode" show-overflow-tooltip>
          <template v-slot="{ row }">
            <p v-if="row.product_dateCode == '' || row.product_dateCode == null || row.product_dateCode == 0">-</p>
            <span v-else>{{ row.product_dateCode }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="product_package" label="封装" key="product_package" show-overflow-tooltip>
          <template v-slot="{ row }">
            <p v-if="row.product_package == '' || row.product_package == null || row.product_package == 0">-</p>
            <span v-else>{{ row.product_package }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="costPrice" label="接受价" key="costPrice" align="right">
          <template v-slot="{ row }">
            <p v-if="row.costPrice == '' || row.costPrice == null || row.costPrice == 0">-</p>
            <span v-else style="color:#00AB2B;">{{ Number.isInteger(row.costPrice) ? row.costPrice + '.00' : row.costPrice
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="inPrice" key="inPrice" :label="ruleForm.status == 103 ? '我的报价' : '我的议价'" align="right">
          <template v-slot="{ row }">
            <p v-if="row.inPrice == '' || row.inPrice == null || row.inPrice == 0">-</p>
            <span v-else style="color:#E37100">{{ Number.isInteger(row.inPrice) ? row.inPrice + '.00' : row.inPrice
            }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="currency" key="currency" label="币种">
          <template v-slot="{ row }">
            <p v-if="row.currency == '' || row.currency == null || row.currency == 0">-</p>
            <span v-else>{{ row.currency }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="deliveryDate" key="deliveryDate" label="交货日期">
          <template v-slot="{ row }">
            <p v-if="row.deliveryDate == '' || row.deliveryDate == null || row.deliveryDate == 0">-</p>
            <span v-else>{{ row.deliveryDate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="deliveryPlace" key="deliveryPlace" label="交货地">
          <template v-slot="{ row }">
            <p v-if="row.deliveryPlace == '' || row.deliveryPlace == null || row.deliveryPlace == 0">-</p>
            <span v-else>{{ row.deliveryPlace == "FArea01" ? "中国大陆" : "中国香港" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="product_packing" key="product_packing" label="包装">
          <template v-slot="{ row }">
            <p v-if="row.product_packing == '' || row.product_packing == null || row.product_packing == 0">-</p>
            <span v-else>{{ row.product_packing }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" key="status" v-if="ruleForm.status == 100 || ruleForm.status == 103" label="报价单状态">
          <template v-slot="{ row }">
            <p v-if="row.status == '' || row.status == null || row.status == 0">-</p>
            <span v-else>
              <span v-if="row.status == '已删除' || row.status == '无法议价'">
                <div
                  style="width:8px;height:8px;background:#FF0000;border-radius: 50%;display: inline-block;margin-right: 5px;">
                </div>
                <span>{{ row.status }}</span>
              </span>
              <span v-else-if="row.status == '未采纳'">
                <div
                  style="width:8px;height:8px;background:#584EAD;border-radius: 50%;display: inline-block;margin-right: 5px;">
                </div>
                <span>{{ row.status }}</span>
              </span>
              <span v-else-if="row.status == '议价完成'">
                <div
                  style="width:8px;height:8px;background:#00AB2B;border-radius: 50%;display: inline-block;margin-right: 5px;">
                </div>
                <span>{{ row.status }}</span>
              </span>
              <span v-else-if="row.status == '已采纳'">
                <div
                  style="width:8px;height:8px;background:#FF8080;border-radius: 50%;display: inline-block;margin-right: 5px;">
                </div>
                <span>{{ row.status }}</span>
              </span>
              <span v-else-if="row.status == '已生成订单'">
                <div
                  style="width:8px;height:8px;background:#2348E8;border-radius: 50%;display: inline-block;margin-right: 5px;">
                </div>
                <span>{{ row.status }}</span>
              </span>
              <span v-else>
                <div
                  style="width:8px;height:8px;background:#FFB300;border-radius: 50%;display: inline-block;margin-right: 5px;">
                </div>
                <span>{{ row.status }}</span>
              </span>
            </span>

          </template>
        </el-table-column>
        <el-table-column prop="createDate" key="createDate" label="报价时间">
          <template v-slot="{ row }">
            <p v-if="row.createDate == '' || row.createDate == null || row.createDate == 0">-</p>
            <span v-else>{{ row.createDate }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="inquiryID"
                         key="inquiryID"
                         label="询价单号"
                         min-width="130"> 
            </el-table-column>-->
        <template slot="empty">
          <img src="@/assets/images/noneData.svg" alt="" class="nullDataImg" />
        </template>
      </el-table>
      <pagination :page.sync='ruleForm.page' :limit.sync="ruleForm.pageSize" :total.sync="total"
        layout=' total,sizes,prev, pager, next, jumper' @pagination='doSearch'  v-if="total > 0"></pagination>
    </div>

    <el-drawer title="" size="560px" :visible.sync="drawerVisible" v-if="drawerVisible">
      <div slot="title" class="drawer">
        <span class="title">议价处理</span>
        <span class="inquiryID">询价单号：{{ qutoData.inquiryID }}</span>
        <!-- <el-divider /> -->
      </div>
      <bargin :qutoData='qutoData' @close="drawerVisible = !drawerVisible, handleQuery()" />
    </el-drawer>

  </div>
</template>
<script>
import bargin from '../components/bargin';
import Pagination from '@/components/Pagination';
import mydate from '@/components/Date/index.vue';
import { getQuoteList } from '@/api/scsapi/index';
export default {
  name: 'myBragining',
  components: {
    Pagination,
    bargin,
    mydate,
  },
  data() {
    return {
      loading: false,
      ruleForm: {
        status: '101',
        partnumber: '',
        brand: '',
        date: [],
        id: '',
        page: 1,
        pageSize: 20,
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
      tableData: [],
      total: 0,
      drawerVisible: false,
      qutoData: {},
      setIntervalTimes: null
    };
  },
  created() {
    this.handleQuery();
  },
  methods: {
    // 交货日期
    getCreateDate(date) {
      this.ruleForm.date = date;
    },
    // 获取数据
    handleQuery() {
      this.ruleForm.page = 1;
      this.doSearch();
    },
    doSearch() {
      this.setIntervalTimes && clearInterval(this.setIntervalTimes);
      this.tableData = [];
      this.loading = true;
      getQuoteList(this.ruleForm)
        .then(res => {
          if (res.status == 200) {
            let data = res.data.rows.map(x => {
              for (let y in x.product) {
                x['product_' + y] = x.product[y];
              }
              return x;
            });
            this.setIntervalTimes = setInterval(() => {
              data.length && data.forEach((item) => {
                if (item.negotiateRemainMin) {
                  if (item.negotiateRemainMin <= 0) {
                    item.negotiateRemainMin = 0;
                    clearInterval(this.setIntervalTimes);
                  } else {
                    item.negotiateRemainMin -= 1;
                  }
                }
              })
              this.tableData = data;
            }, 200);
            this.total = res.data.total;
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading2 = false;
        });
    },
    // 议价
    handleBargin(row) {
      this.drawerVisible = true;
      this.qutoData = row;
    },
    // 重置
    handleReset() {
      this.$refs['form'].resetFields();
      this.handleQuery();
    },
    reset(){
      this.$refs['form'].resetFields();
    }
  },
  filters: {
    manageTime(v) {
      if (!v || isNaN(v)) {
        return v;
      } else {
        // let hour = parseInt(v / 3600);
        // let min = parseInt((v - hour * 60 * 60) / 60);
        // let sec = parseInt((v % 3600) - min * 60);
        // return `${hour < 10 ? '0' + hour : hour}:${min < 10 ? '0' + min : min}:${sec < 10 ? '0' + sec : sec}`;
        let days = parseInt(v / (60 * 60 * 24));
        let hour = parseInt((v % 86400) / 3600);
        let min = parseInt((v % 3600) / 60);
        return `${days}天${hour}时${min}分`
      }
    },
  },
};
</script>

<style scoped lang="scss" src="@/assets/styles/public.scss"></style>

<style lang="scss" scoped>
.my-order {
  // margin: 0 14px;
  margin-top: 15px;

  .my-order-header {
    margin-bottom: 10px;

    ::v-deep.el-tabs__header {
      margin-bottom: 15px !important;
    }

    ::v-deep.el-tabs__item {
      font-weight: 600 !important;
    }

    ::v-deep.el-tabs__item:hover {
      color: #1A2035 !important;
    }

    ::v-deep.el-tabs__item.is-active {
      color: #1A2035 !important;
    }

    ::v-deep.el-tabs__active-bar {
      background: #2348E8 !important;
    }

    ::v-deep.el-tabs__nav-wrap::after {
      height: 1px !important;
    }
  }


  .search {
    display: flex;
    width: 100%;

    .my-order-form {
      border-radius: 5px;
      margin-bottom: 15px;

      .search-form {
        display: flex;

        .label-name {
          ::v-deep .el-form-item__label {
            letter-spacing: 18px !important;
            text-align: right !important;
          }
        }

        .el-form-item {
          width: 30%;
          margin-bottom: 0 !important;
          margin-right: 40px;

          ::v-deep.el-form-item__label {
            font-weight: 400 !important;
            width: 76px;
            height: 28px;
            background: #F0F0F0;
            text-align: center;
            color: #1A2035;
          }

          ::v-deep.el-input__inner {
            width:100%;
            border-radius: 0 2px 2px 0;
          }
        }

        .dataItem {
          margin-right: 22px;
        }
      }


    }
  }

  .search-btn {
    display: flex;
    width: 240px;
  }

}

::v-deep .el-drawer__header {
  // margin-bottom: 0px !important;
  // padding: 15px 38px 15px 32px !important;
  align-items: baseline;

  .drawer {
    .title {
      color: #1A2035;
      font-weight: 600;
      margin-right: 10px;
      font-size: 14px;
    }

    .inquiryID {
      font-size: 12px;
      color: #333;
      font-weight: 400;
    }
  }

  .el-divider {
    // margin: 0 0 20px 0;
  }
}

::v-deep .el-radio-button {
  margin: 0 15px;

  .el-radio-button__inner {
    border-left: 1px solid #dcdfe6;
    box-shadow: none !important;
    border-radius: 4px !important;
  }
}

::v-deep.el-table tbody .cell {
  height: 32px !important;
  line-height: 32px !important;

  p {
    margin: 0 !important;
  }
}
</style>






